<script setup>
// 使用 props 接收传递的新闻数据
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const props = defineProps({
  hotNews: {
    type: Array,
    default: () => []
  }
})
</script>

<template>
  <div>
    <!-- 遍历 hotNews 数组以显示每条新闻 -->
    <div v-for="(news, index) in hotNews" :key="news.id" class="news-header">
      <div
        class="divider"
        :style="{
          backgroundColor:
            index === 0
              ? '#df1300'
              : index === 1
              ? '#e86701'
              : index === 2
              ? '#fcc73e'
              : '#e5e5Ee'
        }"
      >
        <span
          class="number"
          :style="{
            color: index < 3 ? 'white' : '#a19d9e'
          }"
        >
          {{ index + 1 }}
        </span>
      </div>
      <a class="news-title text"> {{ news.data }} </a>
    </div>
  </div>
</template>

<style scoped>
.news-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.divider {
  content: '';
  height: 20px;
  width: 20px;
  display: block;
  border-radius: 6px;
  display: flex; /* 让里面的文字居中 */
  justify-content: center;
  align-items: center;
}
.number {
  font-size: 13px;
}
.news-title {
  margin-left: 10px;
  font-size: 16px;
}

.text {
  background: linear-gradient(to right, #ec3742, #ec3742) no-repeat right bottom;
  background-size: 0px 2px;
  transition: background-size 0.3s;
}
.text:hover {
  background-position: left bottom;
  background-size: 100% 2px;
  color: #ec3742;
  cursor: pointer;
}
</style>
